<template>
  <div class="msgs">
    <ul>
      <li v-for="(item, index) in messages" :key="index">
        <div class="time">{{index|timeFormat(messages)}}</div>
        <message-item :msg="item" @loaded="$emit('scroll')"></message-item>
      </li>
    </ul>
  </div>
</template>

<script>
import messageItem from './messageItem'
export default {
  name: 'message',
  descr: '聊天信息',
  props: {
    messages: {
      type: Array,
      default: () => []
    }
  },
  components: {
    messageItem
  },
  data() {
    return {
    }
  },
  filters: {
    timeFormat(index, messages){
      let lastTime = null
      if (index !== 0) {
        lastTime = messages[index-1].ctime_ms;        
      }else{
        return Object.JXmonent('YYYY-MM-DD HH:mm', messages[index].ctime_ms)
      }
      if ((messages[index].ctime_ms - lastTime) < 60000) {
        return ''
      }
      let day = Object.JXmonent('YYYY-MM-DD', new Date().getTime());
      let msgDay = Object.JXmonent('YYYY-MM-DD', new Date(messages[index].ctime_ms).getTime());
      if (day === msgDay) {
        return Object.JXmonent('HH:mm', messages[index].ctime_ms);
      }
      if (lastTime) {
        return Object.JXmonent('YYYY-MM-DD HH:mm', messages[index].ctime_ms)
      }
      return ''
    }
  },
  watch: {
    messages: {
      handler(val, oldVal){
        setTimeout(() => {
          this.$emit('scroll');
        }, 100);
      },
      deep: true
    }
  },
}
</script>

<style lang="scss" scoped>
.msgs{
  padding: 8px;
  .time{
    text-align: center;
  }
}
</style>